<template>
	<view class="" v-if="mdxx">
		<view style="width: 100%;">
			<!-- 店铺信息卡片 -->
			<view class="mi1c p3 shop-info-card" >
				<view class="shop-header">
					<!-- 店铺 Logo -->
					<cover-image class="shop-logo" :src="bcmdxx.icon || defaultLogo" mode="aspectFill"/>
					<view class="shop-meta">
						<!-- 店铺名称 -->
						<view class="shop-name wei" style="color: #000; font-size: 36rpx; display: inline-block;">
							{{ bcmdxx.name || '未命名店铺' }}
						</view>

						<!-- 是否营业中部分 -->
						<view class="yyztc-wrapper" style="display: inline-block; margin-left: 10rpx;">
							<view class="yyztc"
								:style="{ background: sjxx ? sjxx.storeOpen == 1 ? '' : sjxx.storeOpen == 2 ? '#FDF0B3' : '#FFDCDF' : '#FFDCDF' }">
								<view class="yd"
									:style="{ background: sjxx ? sjxx.storeOpen == 1 ? '' : sjxx.storeOpen == 2 ? '#E6A23C' : '#F56C6C' : '#F56C6C' }">
								</view>
								<view class="yyztc-text">
									{{ sjxx ? sjxx.storeOpen == 1 ? '正常营业' : sjxx.storeOpen == 2 ? '休息中' : '暂停营业' : '暂停营业'}}
								</view>
							</view>
						</view>

						<!-- 店铺ID -->
						<view class="shop-id c9" style="color: #333;font-size: 24rpx;">
							店铺ID：{{ sjxx.id || '000000' }}
						</view>

						<!-- 经营者信息 -->
						<view class="" style="color: #333;font-size: 24rpx;">
							经营者：{{ bcmdxx.storeLinkMan || '未指定经营者' }}
						</view>
					</view>
					<!-- 添加设置图标 -->
					<image class="settings-icon" src="/static/img/my/set.png" mode="aspectFill" @click="goToSettings" />
				</view>
			</view>
		</view>

		<!-- 我的服务模块容器 -->
		<view class="service-container" style="margin-top: 10rpx;">
			<view class="service" style="padding: 20rpx 20rpx;">
				<view class="title f32" style="margin-left: 40rpx;">
					我的服务
				</view>
				<view class="f-raw  bs20" style="display: flex; flex-wrap: wrap;"> <!-- 父容器保持横向排列 -->
					<block v-for="(v, i) in arr" :key="i">
						<view class="p20 f-c-c f28 dikzc " @click="myDataClick(v)" style="flex-basis: 20%;">
							<!-- 图片区域 -->
							<view :class="i > -1 ? 'img1 mb20' : 'img2 mb10'">
								<mg-img :src="`/static/img/my/${v.img}.png`"
									style="width: 88rpx;height: 88rpx;"></mg-img>
							</view>
							<!-- 文字区域（带溢出省略） -->
							<view>{{ v.name }}</view>
						</view>
					</block>
				</view>
			</view>
		</view>

		<!-- 账号安全和联系区域经理模块 -->
		<view class="additional-service-container" style="">
			<view class="title f32" style="margin-left: 40rpx;">
				其他服务
			</view>
			<view class="additional-services" style="margin-left: 20rpx;">
				<block v-for="(v, i) in additionalServices" :key="i">
					<view class="service-item" @click="myDataClick(v)">
						<!-- 图标区域 -->
						<view class="service-icon">
							<mg-img :src="`/static/img/my/${v.img}.png`" style="width: 50rpx;height: 50rpx;"></mg-img>
						</view>
						<!-- 文字区域 -->
						<view class="service-text">{{ v.name }}</view>
						<!-- 右侧箭头 -->
						<view class="arrow-icon">
							<mg-img src="/static/img/my/r.png" style="width: 24rpx;height: 24rpx;"></mg-img>
						</view>
					</view>
					<!-- 分隔线 -->
					<view v-if="i !== additionalServices.length - 1" class="service-divider"></view>
				</block>
			</view>
		</view>

		<tab-bar></tab-bar>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import uniNavBar from '@/components/third/uni-nav-bar.vue';
	import {
		data
	} from '../../uview-ui/libs/mixin/mixin';

	export default {
		name: 'my-index',
		components: {
			uniNavBar
		},
		data() {
			return {

				showloading: true,
				opcity: 0,
				mdxx: null, // 
				bcmdxx: {}, // 店铺基础信息
				defaultLogo: '/static/img/my/r.png',//默认店铺logo
				// 其他服务模块的数据
				additionalServices: [{
						img: '8',
						url: '../my/other/dqzh',
						name: '账号安全'
					},
					{
						img: '5', // 假设这里是“常见问题”的图标编号
						name: '联系我们',
					}
				],
				arr: [{
						img: '4',
						url: '../my/storeset/shxx',
						name: '门店设置'
					},
					{
						img: '2',
						url: '../my/other/bzzx',
						name: '帮助中心'
					},
					{
						img: '1',
						url: '../my/printset/set',
						name: '打印设置'
					},
					{
						img: '6',
						url: '../dp/storeset/ddsz',
						name: '接单设置'
					},
					{
						img: '3',
						url: '../my/other/muddle',
						name: '配送绑定'
					},
					{
						img: '7',
						url: '../my/other/shxx-t',
						name: '资质认证'
					},
					{
						img: '9',
						url: '../my/other/shxx-s',
						name: '门店信息'
					}
				]
			};
		},
		computed: {
			...mapState(['sjxx', 'version'])
		},
		onLoad(options) {
			this.getData();
			this.getStoreInfo(); //加载数据时获取店铺数据
		},
		onShow() {
			if (this.onShow) {
				this.getData();
			}
			this.onShow = true;
		},
		methods: {
			...mapMutations(['delAccount', 'removeAccount']),
			// 新增获取店铺详细信息，渲染店铺logo，联系人
			async getStoreInfo() {
				try {
					const res = await this.util.request({
						url: this.api.bcmdxx,
						method: 'GET' // GET请求
					});

					if (res.code === 1) {
						this.bcmdxx = res.data;
						// 数据格式转换
						this.bcmdxx.icon = res.data.icon?.split(',') || [];
					}
				} catch (error) {
					this.util.message('信息加载失败');
				}
			},
			async myDataClick(v) {
				let url = '';
				if (v.url) {
					url = v.url;
				} else {
					if (v.name == '联系我们') {
						return this.util.makeTel(this.system.tel);
					}
					url = '../my/other/kfz';
				}
				this.go({
					t: 1,
					url
				});
			},
			// 个人信息卡跳转到设置页面
			goToSettings() {
				uni.navigateTo({
					url: '../my/other/change-password', // 设置目标跳转路径
				});
			},
			getData() {
				this.util
					.request({
						url: this.api.wdymxx,
						method: 'POST'
					})
					.then(res => {
						if (res.code == 1) {
							// 处理店铺信息数据
							this.mdxx = {
								...res.data,
								// 确保数据结构完整（模拟字段示例）
								shopId: res.data.shopId || 'SH0001',
								shopLogo: res.data.shopLogo ||
									'https://profile-avatar.csdnimg.cn/9315853dcf7a4b7aa9b166ef84a254f3_m0_66644014.jpg!1',
								owner: res.data.owner || '未指定经营者',
								goodNum: res.data.goodNum || 0
							};
							this.showloading = false;
						} else {
							this.util.message(res.msg, 3);
							this.showloading = false;
						}
					});
			},
			// 退出登录
			async tcdl() {
				try {
					var account = uni.getStorageSync('account')
					await this.util.modal(`确认退出登录吗？`);
					console.log('registrationID:', account.registrationID)
					// 解除极光绑定
					await this.util.request({
						'url': this.api.loginOut,
						method: 'POST',
						data: {
							registrationID: account.registrationID
						}
					})
					this.delAccount();
					var loginUrl = '/yb_shd/my/login'
					this.go({
						t: 3,
						url: loginUrl
					});
				} catch (e) {}
			},
			// 清楚缓存逻辑
			qchc() {
				uni.removeStorageSync('account');
				this.removeAccount({});
				setTimeout(() => {
					var loginUrl = '/yb_shd/my/login'
					this.go({
						t: 3,
						url: loginUrl
					});
				}, 1000);
			},
			goDl(v) {
				uni.setStorageSync('fwb', v.body);
				this.go({
					t: 1,
					url: `/yb_shd/my/other/gywm?t=${v.title}&p=4`
				});
			}
		},
		onPageScroll(e) {
			if (this.opcity >= 1 && e.scrollTop / 64 >= 1) {
				return;
			}
			let o = e.scrollTop / 64;
			this.opcity = o;
		}
	};
</script>
<style scoped lang="scss">
	* {
		margin: 0;
		padding: 0;
	}

	.yyztc-wrapper {
		display: inline-block;
		margin-left: 10rpx;
		/* 确保“是否营业中”与店铺名称之间有适当的间距 */
	}

	.yyztc-text {
		color: #333;
		font-size: 24rpx;
		/* 保证“是否营业中”的文字大小适合 */
	}

	.yyztc {
		background: #e6f9f3;
		border-radius: 40rpx;
		padding: 6rpx 10rpx;
		display: inline-flex;
		/* 使用 inline-flex 保证在同一行内显示 */
		align-items: center;
		/* 保证内容垂直居中 */

		.yd {
			width: 20rpx;
			height: 20rpx;
			background: #00be7e;
			margin-right: 6rpx;
			border-radius: 50rpx;
			/* 图标和文字之间的间距 */
		}
	}

	.service-container {
		background-color: #FFFFFF;
		margin-bottom: 10rpx;
	}

	.service {
		width: 100%;
		background: #FFFFFF;
	}

	.additional-service-container {

		background-color: #FFFFFF;
		padding: 20rpx;
	}

	.additional-services {
		display: flex;
		flex-direction: column;
	}

	.service-item {
		display: flex;
		align-items: center;
		// padding: 24rpx 0;
		padding: 30rpx 0 0 0;
		width: 100%;
	}

	.service-item:last-child {
		border-bottom: none;
	}

	.service-icon {
		width: 50rpx;
		height: 50rpx;
		margin-right: 20rpx;
	}

	.service-text {
		color: #333;
		font-size: 28rpx;
		flex: 1;
	}

	.arrow-icon {
		width: 24rpx;
		height: 24rpx;
	}

	.service-divider {
		height: 1px;
		background-color: #e0e0e0;
		margin-top: 10rpx;
	}

	.shop-info-card {
		// background: #FE9367;
		background: #FFFFFF;
	}

	.shop-header {
		display: flex;
		align-items: center;
		padding-top: 120rpx;
	}

	.shop-logo {
		width: 120rpx;
		height: 120rpx;
		border-radius: 16rpx;
		margin-right: 30rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
		object-fit: none;//适应大小
	}

	.shop-meta {
		flex: 1;

		.shop-name {
			color: #2c3e50;
			margin-bottom: 10rpx;

		}

		.shop-id {
			color: #ffffff;
		}
	}

	.settings-icon {
		width: 50rpx;
		height: 50rpx;
		margin-left: 20rpx;
		cursor: pointer;
		margin-top: 70rpx;
	}

	.title {
		position: relative;
		margin-left: 20rpx;
		font-weight: bold;
		color: #000;
	}

	.title::after {
		content: "";
		position: absolute;
		width: 10rpx;
		height: 20rpx;
		left: -20rpx;
		top: 50%;
		transform: translateY(-50%);
		background: #FE9367;
	}

	.dikzc {
		width: 20%;

		.img1 {
			width: 88rpx;
			height: 88rpx;
		}

		.img2 {
			width: 88rpx;
			height: 88rpx;
		}
	}
</style>